import "./index.scss";
import "react-quill/dist/quill.snow.css";
import { useState, useEffect } from "react";
import { Tabs, Button, Select, Form, Input, Table, message } from "antd";
import type { ColumnsType } from "antd/es/table";
import { useNavigate } from "react-router-dom";
import http from "../../../utils/http";

const PolicyArticles = () => {
  //标签页
  const onChange = (key: string) => {
    console.log(key);
  };

  //数据类型
  interface DataType {
    key: string;
    atitle: string;
    atype: string;
    atime: string;
    acontent: string;
  }

  // 渲染数据
  const getData = () => {
    http({
      url: "/getArticle",
    }).then((res) => {
      console.log("所有数据", res);

      let _data = res.data.map((v: { id: number }) => {
        return { ...v, key: v.id };
      });
      setData(_data);
    });
  };
  useEffect(() => {
    getData();
  }, []);

  // 搜索信息
  const onSearch = (search: any) => {
    console.log(search);

    http({
      url: "/searchArticle",
      params: {
        atitle: search.atitle || "",
        atype: search.atype || "",
      },
    }).then((res: { [key: string]: any }) => {
      console.log(res);
      if (res.error == 0) {
        message.success("查询成功");
        let _data = res.data.map((v: { id: number }) => {
          return { ...v, key: v.id };
        });
        setData(_data);
      } else {
        message.error("查询失败");
      }
    });
  };

  //清空搜索
  const [searchText] = Form.useForm();
  const clear = () => {
    searchText.resetFields();
    getData();
  };
  const onFinishFailed = (errorInfo: any) => {
    console.log("Failed:", errorInfo);
  };

  //点击名字跳转详情
  const navigate = useNavigate();
  const toDetail1 = (record: any) => {
    console.log("record", record);
    navigate(`/zhome/z-ArticleDetails`, { state: record });
  };

  //表格
  const columns: ColumnsType<DataType> = [
    {
      title: "标题",
      dataIndex: "atitle",
      key: "atitle",
      render: (text, record) => (
        <a
          onClick={() => {
            toDetail1(record);
          }}
          className="delete"
        >
          {text}
        </a>
      ),
    },
    {
      title: "分类",
      dataIndex: "atype",
      key: "atype",
    },
  ];

  const [data, setData] = useState([]);

  //获取提交时的当前时间
  // 获得当前时间
  const getNowDate = () => {
    const myDate = new Date();
    const year = myDate.getFullYear(); // 获取当前年
    const mon = myDate.getMonth() + 1; // 获取当前月
    const date = myDate.getDate(); // 获取当前日
    const hours = myDate.getHours(); // 获取当前小时
    const minutes = myDate.getMinutes(); // 获取当前分钟
    const seconds = myDate.getSeconds(); // 获取当前秒
    const now =
      year +
      "-" +
      mon +
      "-" +
      date +
      " " +
      hours +
      ":" +
      minutes +
      ":" +
      seconds;
    return now;
  };

  return (
    <div className="policyArticles">
      <div className="title">政策通告文章</div>
      <div className="hr"></div>

      <Tabs
        defaultActiveKey="1"
        onChange={onChange}
        items={[
          {
            label: `文章列表`,
            key: "1",
            children: (
              <>
                <Form
                  className="listBox"
                  name="customized_form_controls"
                  layout="inline"
                  initialValues={{ remember: true }}
                  form={searchText}
                  autoComplete="off"
                  onFinish={onSearch}
                  onFinishFailed={onFinishFailed}
                >
                  <Form.Item name="atitle" label="文章标题">
                    <Input />
                  </Form.Item>

                  <Form.Item label="分类" name="atype">
                    <Select style={{ width: "151px" }}>
                      <Select.Option value="公告类">公告类</Select.Option>
                      <Select.Option value="知识类">知识类</Select.Option>
                      <Select.Option value="新闻类">新闻类</Select.Option>
                    </Select>
                  </Form.Item>

                  <Form.Item>
                    <Button className="btn" htmlType="submit">
                      查询
                    </Button>
                  </Form.Item>

                  <Form.Item>
                    <Button className="btn" onClick={clear}>
                      清空查询
                    </Button>
                  </Form.Item>
                </Form>

                <Table
                  columns={columns}
                  bordered={true}
                  pagination={{ defaultPageSize: 5 }}
                  dataSource={data}
                />
              </>
            ),
          },
        ]}
      />
    </div>
  );
};
export default PolicyArticles;
